<template>
  <div>
    <h4>{{ title }} 的搜索结果</h4>
    <van-list
      v-model="loading"
      :finished="finished"
      :immediate-check="false"
      finished-text="没有更多了"
      @load="loadMore"
    >
      <div v-for="item in listData" :key="item.id" class="list-item">
        <div @click="gotoDetail(item)">
          {{ item.name }}
        </div>
      </div>
    </van-list>
  </div>
</template>
<script>
import { sleep } from "../utils";
const pageSize = 20;
async function getData(page, pageSize, keyWord) {
  console.log('getData', keyWord, page)
  await sleep(500);
  const data = [];
  for (let index = pageSize*(page -1); index < pageSize*page; index++) {
    data.push({
      id: index,
      name: `${keyWord} ${index + 1}`,
    });
  }
  return data;
}
export default {
  name: 'list',
  data() {
    return {
      listData: [],
      loading: false,
      finished: false,
      page: 0,
      title: "",
    };
  },
  activated() {
    if (this.$route.params.keyWord) {
      this.title = this.$route.params.keyWord;
      this.init()
    }
  },
  methods: {
    init() {
      console.log('listinit')
      this.listData = [];
      this.finished = false;
      this.loading = false;
      this.page = 0;
      this.loadMore();
    },
    async loadMore() {
      this.page++
      const data = await getData(this.page, pageSize, this.title);
      this.listData = [...this.listData, ...data];
      this.loading = false;
    },
    gotoDetail(item) {
      this.$router.push({
        path: '/detail',
        query: {
          name: item.name,
        },
      });
    },
  },
};
</script>
<style>
.list-item {
  text-align: center;
  margin-bottom: 10px;
  line-height: 40px;
  background-color: darkorange;
  color: #fff;
  height: 40px;
}
</style>
